<div id='main'>
    <div class="col-12 cardPadding">
        <div class='card'>
            <div class="card-header fw-bold">
                <svg class="card_icon" fill="currentColor" viewBox="0 0 16 16">
                    <use xlink:href="icons.svg#magic" />
                </svg><span data-i18n="p.zi.cfg.tt"></span>
            </div>
            <div class='card-body'>
                <div class="row">
                    <div class='col-sm-12'>
                        <div class='form-group'>
                            <div class="alert alert-warning visually-hidden" role="alert" id="apAlert"
                                data-i18n="p.zi.cfg.alarm">
                            </div>
                            <label for='generatedFile' data-i18n="p.zi.cfg.sel"></label>
                            <label>
                                <div class="ms-1 form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="generatorType" id="z2m" checked
                                        onclick="generateConfig(this.id)">
                                    <label class="form-check-label" for="z2m">Zigbee2MQTT</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="generatorType" id="zha"
                                        onclick="generateConfig(this.id)">
                                    <label class="form-check-label" for="zha">ZHA</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="generatorType" id="usb"
                                        onclick="generateConfig(this.id)">
                                    <label class="form-check-label" for="usb">USB</label>
                                </div>
                            </label>
                            <textarea class="form-control mb-2" id="generatedFile" name="file" rows="12"></textarea>
                            <button type="button" class="btn btn-outline-primary col-sm-12 col-md-4"
                                onclick="copyCode()"><svg class="card_icon" viewBox="0 0 16 16">
                                    <use id="clipIco" xlink:href="icons.svg#clipboard2" />
                                </svg><span data-i18n="c.cc"></span></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 cardPadding">
        <form class="saveParams" method='POST' action="saveParams" style="margin-block-end: 0em;">
            <div class='card'>
                <div class="card-header fw-bold">
                    <svg class="card_icon" fill="currentColor" viewBox="0 0 16 16">
                        <use xlink:href="icons.svg#activity" />
                    </svg><span data-i18n="p.zi.so"></span>
                </div>
                <div class='card-body'>
                    <div class="row">
                        <div class='col-sm-12 mb-4'>
                            <div class='form-group'>
                                <label for='coordMode' data-i18n="p.ge.work.mode.desc"></label>
                                <select class='form-select d-inline' id='coordMode' name='coordMode'>
                                    <option data-r2v="lanMode" value='0' data-i18n="p.ge.work.mode.net"></option>
                                    <option data-r2v="usbMode" value='1' data-i18n="p.ge.work.mode.usb"></option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class='col-sm-12 col-md-6 mb-4'>
                            <div class='form-group'>
                                <label for='baud' data-i18n="p.zi.ss"></label>
                                <select class='form-select' id='baud' name='baud'>
                                    <option data-r2v="9600" value='9600'>9600 bauds</option>
                                    <option data-r2v="19200" value='19200'>19200 bauds</option>
                                    <option data-r2v="38400" value='38400'>38400 bauds</option>
                                    <option data-r2v="57600" value='57600'>57600 bauds</option>
                                    <option data-r2v="115200" value='115200'>115200 bauds</option>
                                    <option data-r2v="230400" value='230400'>230400 bauds</option>
                                    <option data-r2v="460800" value='460800'>460800 bauds</option>
                                </select>
                            </div>
                        </div>
                        <div class='col-sm-12 col-md-6 mb-4'>
                            <div class='form-group'>
                                <label for='port' data-i18n="p.zi.sp"></label>
                                <input data-r2v="socketPort" class='form-control' id='port' type='number' name='port'
                                    min='100' max='65000'>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 d-flex justify-content-center">
                        <button type="submit" class="btn btn-outline-primary col-6" name='save'
                            data-i18n="c.save"></button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="col-12 cardPadding">
        <div class='card'>
            <div class="card-header fw-bold">
                <svg class="card_icon" fill="currentColor" viewBox="0 0 16 16">
                    <use xlink:href="icons.svg#exclamation-triangle" />
                </svg>
                <span data-i18n="p.zi.fws.tt"></span>
            </div>
            <div class='card-body'>
                <div class='col-sm-12'>
                    <div class="alert alert-danger" role="alert" id="apAlert" data-i18n="p.zi.fws.alarm">
                    </div>
                    <div class="row justify-content-center my-4 zb_cards">
                        <div class="col-4">
                            <div class="card selectable-card zfs_coordinator">
                                <div class="card-body text-center card-label">
                                    <svg class="large-icon" fill="currentColor" viewBox="0 0 16 16">
                                        <use xlink:href="icons.svg#zigbee" />
                                    </svg>
                                    <span>Coordinator</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="card selectable-card zfs_router">
                                <div class="card-body text-center card-label">
                                    <svg class="large-icon" fill="currentColor" viewBox="0 0 16 16">
                                        <use xlink:href="icons.svg#zigbee" />
                                    </svg>
                                    <span>Router</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="card selectable-card zfs_thread">
                                <div class="card-body text-center card-label">
                                    <svg class="large-icon" fill="currentColor" viewBox="0 0 16 16">
                                        <use xlink:href="icons.svg#thread" />
                                    </svg>
                                    <span>OpenThread</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 d-flex justify-content-center">
                    <button class="btn btn-warning col-6" id="zbMode" onclick="getSelectedCard()" data-i18n="c.sure"
                        disabled></button>
                </div>
            </div>
        </div>
    </div>
    <script>
        document.querySelectorAll('.selectable-card').forEach(card => {
            card.addEventListener('click', function () {
                document.querySelectorAll('.selectable-card').forEach(card => card.classList.remove('selected'));
                this.classList.add('selected');

                const zbModeButton = document.getElementById('zbMode');
                if (zbModeButton) {
                    zbModeButton.disabled = false;
                }
            });
        });

        function getSelectedCard() {
            const selectedCard = document.querySelector('.selectable-card.selected');
            if (!selectedCard) {
                console.log("No card selected.");
                return;
            }

            const classToFwMap = {
                "coordinator": "coordinator",
                "router": "router",
                "thread": "thread"
            };

            const classToErrorMessage = {
                "coordinator": i18next.t('md.zb.ncf'),
                "router": i18next.t('md.zb.nrf'),
                "thread": i18next.t('md.zb.ntf')
            };

            $.get(zbFwInfoUrl)
                .then(data => JSON.parse(data))
                .then(json => {
                    return $.get(apiLink + api.actions.API_GET_PARAM + "&param=zbHwVer")
                        .then(chip => findAllVersionsSorted(json, chip));
                })
                .then(fw => {
                    const matchedClass = Object.keys(classToFwMap).find(cls => selectedCard.className.includes(cls));
                    
                    if (matchedClass && fw[classToFwMap[matchedClass]] && fw[classToFwMap[matchedClass]].length > 0) {
                        const fileLink = fw[classToFwMap[matchedClass]][0].link;
                        const baudRate = fw[classToFwMap[matchedClass]][0].baud;
                        console.log(fileLink + " @ " + baudRate);
                        modalConstructor("flashZBM");
                        startZbFlash(fileLink + "?b=" + baudRate);
                    } else {
                        const errorMessage = classToErrorMessage[matchedClass] || "No matching firmware available.";
                        console.log(errorMessage);
                        toastConstructor("noZbFw", errorMessage);
                    }
                })
                .fail(error => {
                    toastConstructor("noZbFw", "Error retrieving firmware data.");
                    console.error(error);
                });
        }
    </script>
</div>